<template>
	<view class="index-content pagebg">
    
    <view class="index-banner"></view>
    
    <view class="index-title">
      <view class="item-tou"></view>
      
      <view class="item-tou1">
        <view class="item-tou1-index">
          <text class="item-text-index1">廖广大</text>
          <view class="Vip">
              <text>vip 1</text>
          </view>
        </view>
        <text class="index-title-text">有一张喜茶券未使用，立即查看</text>
      </view>
      
      <view class="Shu"></view>
      
      <view class="right-item">
            <image class="erWeMa" src="../../common/images/首页二维码.png" mode=""></image>
            <text class="HuiYuan">会员码</text>
      </view>
    </view>
    
    <view class="index-subject">
        <view class="topBOX">
          <view class="leftBox">
            <view class="yuan"></view>
            <text class="shang-text">了解红花籽油</text>
            <text class="xia-text">让我们从源头开始了解健康</text>
          </view>
          <view class="leftBox">
            <view class="yuan"></view>
            <text class="shang-text">加入会员</text>
            <text class="xia-text">成为会员享受超多折扣</text>
          </view>
        </view>
        <view class="bottomBox">
          <view class="yuan"></view>
          <text class="shang-text">分享健康</text>
          <text class="xia-text">家人健康从换油开始</text>
        </view>
    </view>
    
    <view class="index-content-bottom">
        <view class="index-bottom-item">
          <text class="top-text">喜茶百货</text>
          <text class="bottom-text">中秋月饼抢鲜上市</text>
        </view>
        <view class="index-bottom-item">
          <text class="top-text">喜茶百货</text>
          <text class="bottom-text">中秋月饼抢鲜上市</text>
        </view>
        <view class="index-bottom-item">
          <text class="top-text">喜茶百货</text>
          <text class="bottom-text">中秋月饼抢鲜上市</text>
        </view>
    </view>
    
    <view class="safe-area-inster-bottom"></view>
    
  </view>
</template>

<script setup> </script>

<style  lang="scss" scoped>
.index-banner{
  height: 489rpx;
  width: 100%;
  // background-color: #fff;
  margin-bottom: 20rpx;
}

.index-title{
  position: absolute;
  left: 32rpx;
  top: 536rpx;
  width: 686rpx;
  height: 160rpx;
  opacity: 1;
  border-radius: 16rpx;
  background: rgba(254, 255, 254, 1);
  box-shadow: 0rpx 6rpx 16rpx  rgba(0, 0, 0, 0.06);
  padding: 44rpx 40rpx;
  display: flex;
        .Shu{
          position: absolute;
          right: 25%;
          height: 70rpx;
          width: 1rpx;
          // background: rgba(238, 238, 238, 1);
          background-color: #000;
        }
        .item-tou{
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            opacity: 1;
            background: rgba(216, 216, 216, 1);
        }
        .item-tou1{
          margin-left: 15rpx;
          .item-tou1-index{
            display: flex;
            font-size: 26rpx;
            .Vip{
              width: 66rpx;
              height: 28rpx;
              background-color: rgba(165, 222, 248, 1);
              text-align: center;
              line-height: 28rpx;
                text{
                  font-size: 18rpx;
                  font-weight: 400;
                }
            }
          }
          .index-title-text{
            font-size: 22rpx;
            color: rgba(0, 0, 0, 0.5);
          }
        }
        .right-item{
          position: absolute;
          right: 8%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .erWeMa{
            width: 37.89rpx;
            height: 40.19rpx;
          }
          .HuiYuan{
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.3);
            margin-top: 8rpx;
          }
        }
}
  
.index-subject{
  position: absolute;
  left: 32rpx;
  top: 728rpx;
  width: 686rpx;
  height: 417rpx;
  opacity: 1;
  border-radius: 16rpx;
  background: rgba(254, 255, 254, 1);
  box-shadow: 0rpx 6rpx 16rpx  rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
    .topBOX{
      display: flex;
      height: 312rpx;
      width: 100%;
      border-bottom: 1rpx solid  rgba(238, 238, 238, 1);
      .leftBox{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        
        .yuan{
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
          background: rgba(216, 216, 216, 1);
        }
        .shang-text{
          font-size: 36rpx;
          font-weight: 700;
        }
        .xia-text{
          font-size: 24rpx;
          font-weight: 700;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
    .bottomBox{
      height: 104rpx;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .yuan{
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        background: rgba(216, 216, 216, 1);
      }
      .shang-text{
        font-size: 28rpx;
        font-weight: 700;
      }
      .xia-text{
        font-size: 36rpx;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.5);
      }
    }
}

.index-content-bottom{
  position: absolute;
  top:1170rpx;
  left: 50%;
  transform: translate(-50%);
  width: 686rpx;
  display: flex;
  justify-content: space-around;
    .index-bottom-item{
        display: flex;
        flex-direction: column;
        width: 215rpx;
        height: 248rpx;
        opacity: 1;
        border-radius: 16rpx;
        background: rgba(254, 255, 254, 1);
        box-shadow: 0rpx 6rpx 16rpx  rgba(0, 0, 0, 0.06);
        .top-text{
          color: rgba(0, 0, 0, 0.8);
          font-size: 28rpx;
        }
        .bottom-text{
          color: rgba(0, 0, 0, 0.3);
          font-size: 22rpx;
        }
    }
}
</style>
